import React from 'react';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';

export default props => {
    const { data } = props;
    const chartDom = useRef(null);
    const { t } = useTranslation();
    useEffect(() => {
        const chart = echarts.init(chartDom.current);
        const isDataValid = data.length > 0;
        let chartDataList = [];
        let totalCost = 0;
        const defaultColors = ['#EB8F34', '#306F83', '#CCCCCC'];
        function generateRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        if (isDataValid) {
            chartDataList = data.map((item, index) => {
                totalCost += item.cost;
                const color = index < defaultColors.length ? defaultColors[index] : generateRandomColor();
                return {
                    value: item.cost,
                    name: item.statisticalDay,
                    itemStyle: {
                        color: color,
                    },
                };
            });
        }
        chart.setOption({
            title: {
                text: isDataValid ? t('menu.platform.pie.title') : t('menu.platform.pie.noData'),
                left: 'center',
                top: '36%',
                textStyle: {
                    color: '#222425',   // 文字颜色
                    fontSize: 14,    // 字体大小
                    fontWeight: '600',
                    lineHeight: 30
                }
            },
            tooltip: isDataValid ? {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {d}%'
            } : null,
            legend: {
                orient: 'vertical',
                bottom: '0',
                left: 'center',
                padding: [20, 0, 0, 0],
                formatter: function (name) {
                    const total = chartDataList.find(item => item.name === name);
                    const percentage = total ? ((total.value / totalCost) * 100).toFixed(2) : 0;
                    return `${name} ${percentage}%`;
                },
                textStyle: {
                    fontSize: 12,
                    color: '#62666A',
                    fontWeight: 400
                },
                data: isDataValid ? chartDataList.map(item => item.name) : []
            },
            series: [
                {
                    name: t('menu.platform.pie.occupancy'),
                    type: 'pie',
                    radius: ['30%', '65%'],
                    center: ['50%', '45%'], 
                    avoidLabelOverlap: false,
                    label: {
                        show: isDataValid,
                        position: 'inner',
                        formatter: (params) => {
                            const total = chartDataList.find(item => item.name === params.name);
                            const percentage = total ? ((total.value / totalCost) * 100).toFixed(2) : 0;
                            return `{usedStyle|${percentage}%}`;
                        },
                        rich: {
                            usedStyle: {
                                color: '#FFFFFF',
                                fontSize: 12,
                                fontWeight: '400'
                            },
                        }
                    },
                    labelLine: {
                        show: isDataValid
                    },
                    data: isDataValid ? chartDataList : [
                        { value: 100, name: t('menu.platform.pie.noData'), itemStyle: { color: '#ddd' } }
                    ]
                }
            ]
        });
        return () => {
            chart.dispose();
        };
    }, [data]);

    return (
        <div
            ref={chartDom}
            style={{
                width: '400px',
                 height:`${400 + (data.length > 4 ? (data.length - 4) * 50 : 0)}px`  
            }}
        />
    );
};

